<template>
  <div>
    <home-header></home-header>
    <home-nav></home-nav>
    <detail-content
      :detail="detail"
      :reply="reply"
      :hot="hot"
    >
    </detail-content>
  </div>
</template>

<script>
import HomeHeader from "@/pages/common/Header";
import HomeNav from "@/pages/common/Nav";
import DetailContent from "./components/Content";
import {detail} from "@/api/detail";
import {category} from "@/api";

export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeNav,
    DetailContent
  },
  data () {
    return {
      detail: {},
      reply: [],
      hot: []
    }
  },
  methods: {
    getDetail () {
      detail(this.$route.params.id).then(this.getIndexSucc)
    },
    getIndexSucc (res) {
      res = res.data.data
      this.detail = res.detail
      this.reply = res.reply
      this.hot = res.hot
    },
    initCommon () {
      category().then(this.getInitSucc);
    },
    getInitSucc (res) {
      // console.log(res.data.data)
      this.$store.state.navs = res.data.data
    }
  },
  // 导航守卫
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    next()
    this.getDetail()
  },
  mounted () {
    this.getDetail()
    this.initCommon()
  }
}
</script>